Writing Your First Phone Application - Adding Code (part 1)

First off, if you look at the text of the XAML, you should see the first line of text shows the root element of the XAML to be a PhoneApplicationPage. This is the basic class from which each page you create will derive. The x:Class declaration is the name of the class that represents the class. If you open the code file, you will see this code was created for you.

HelloWorldPhone.MainPage"
  ...

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

namespace HelloWorldPhone
{
  public partial class MainPage : PhoneApplicationPage
  {
    // Constructor
    public MainPage()
    {
      InitializeComponent();
    }
  }
}

					  

If you click where it says ““, you can enter a name. Name the TextBlock “theStatus”. If you then switch over to the code file, you will be able to use that name as a member of the class:

...
public partial class MainPage : PhoneApplicationPage
{
  // Constructor
  public MainPage()
  {
    InitializeComponent();

    theStatus.Text = "Hello from Code";
  }
}
...

At this point if you run the application (hitting F5 works), you will see that this line of code is being executed as the theStatus TextBlock is changed to show the new text (as seen in Figure 2).

There is an important fact you should derive from the fact that named elements in the XAML become part of the class: the job of the XAML is to build an object graph. The hierarchy of the XAML is just about creating the hierarchy of objects. At runtime, you can modify these objects in whatever way you want.

Working with Events

Since you are building phone application, let’s show how basic events work. You can wire up events just as easily using standard language (e.g. C#) semantics. For example, you could handle the MouseLeftButtonUp event on theStatus to run code with the text is tapped:

...
public partial class MainPage : PhoneApplicationPage
{
  // Constructor
  public MainPage()
  {
    InitializeComponent();

    theStatus.Text = "Hello from Code";

    theStatus.MouseLeftButtonUp +=
      new MouseButtonEventHandler(theStatus_MouseLeftButtonUp);
  }

  void theStatus_MouseLeftButtonUp(object sender,
                                   MouseButtonEventArgs e)
  {
    theStatus.Text = "Status was Tapped";
  }
}
...

When you tap on theStatus, the MouseLeftButtonUp event will be fired (which is what causes the code in the event handler to be called. All events work in this simple fashion, but the number and type of events in Silverlight for the Windows Phone 7 varies widely.

Debugging In the Emulator

If clicking the user interface was not working the way we would like, it might help if we could stop the operation during an event to see what was happening during execution. We can do this by debugging our operation. We can use the debugger to set breakpoints and stop in code while using the emulator. Place the text cursor inside the event handler and press F9 to create a breakpoint. When you run the application (again, hit F5) you can see that when you click on theStatus TextBlock that the debugger stops inside the event handler. You can hover your mouse over specific code elements (e.g. theStatus.Text) to see the value in a popup (as shown in Figure 3).

Pressing the F5 key while stopped at a breakpoint will cause the application to continue running. There are other ways to walk through the code, but for now that should be sufficient to get you started. Using the emulator is the most common way you will develop your applciations, but there are times some interactions are difficult to do with the emulator (e.g. multi-touch, using phone sensors, etc.) that debugging directly on a device would be very useful. Luckily, debugging on the device is supported and works pretty simply.